<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/79197A6D-C01D-DE44-8C92-227B2827362C/main.js" charset="UTF-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q4MPiEDZc7UcG18QEUAqnqf48MyWWdED"></script>
	<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/bootstrap/2.3.1/css_${not empty cookie.theme.value ? cookie.theme.value : 'cerulean'}/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
	<!--[if lte IE 7]><link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome-ie7.min.css" type="text/css" rel="stylesheet" /><![endif]-->
	<!--[if lte IE 6]><link href="${ctxStatic}/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script><![endif]-->
	<link href="${ctxStatic}/jquery-select2/3.4/select2.min.css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/common/jeesite.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/common/jeesite.js" type="text/javascript"></script>
	<script type="text/javascript">var ctx = '${ctx}', ctxStatic='${ctxStatic}';</script>
	<title>草原带管理管理</title>
</head>
<body>
<ul class="nav nav-tabs">
		<li class="active"><a href="">草原带管理列表</a></li>		
	</ul>
	<form:form id="searchForm" modelAttribute="sysGrassBelt" action="${ctx}/grassbelt/sysGrassBelt/" method="post" class="breadcrumb form-search">
		<ul class="ul-form">
			<li><label>名称：</label>
				<form:input path="name" htmlEscape="false" maxlength="60" class="input-medium"/>
			</li>
			<li><label>草地类型：</label>
				<sys:treeselect id="grasstype" name="grasstype.id" value="${grasstype.id}" labelName="grasstype.name" labelValue="${grasstype.parent.name}"
					title="父类型" url="/grasstype/grassType/treeData" extId="${grasstype.id}" cssClass="" allowClear="true"/>			
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="query()"/></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

	//百度地图API功能 111.147241,41.812983
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(111.147241, 41.812983), 6);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("呼和浩特");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	var menu = new BMap.ContextMenu();
	var txtMenuItem = [
		{
			text:'标注草原带',
			callback:function(e){
				editBelt("",e.lng,e.lat);
			}
		}/* ,
		{
			text:'移除该点',
			callback:function(e){
				
			}
		} */
	];
	for(var i=0; i < txtMenuItem.length; i++){
		menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
	}
	map.addContextMenu(menu);
	
	// 编写自定义函数,创建标注
/*  	function addMarker(id,point,label){
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		marker.setLabel(label);
		//marker.addEventListener("click",attribute);
 		marker.addEventListener("click", function() {
			attribute(id);
		}); 
	}  */
	$(document).ready(function(){
		listBelt();
	});
	//查询所有点
	function listBelt()
	{
		var jsondata;
         $.getJSON('${ctx}/grassbelt/sysGrassBelt/listBelt', function (data) {
             $.each(data, function (entryindex, entry) {       
           			var point = new BMap.Point(entry["lon"], entry["lat"]);
     				addMarker(entry["id"],point,entry["name"],entry["stand8val"],entry["standAmount"]);
              });

        }); 
	
	}
	//增加内容
	function addMarker(id,point,name,stand8val,standAmount)
	{
		var marker = new BMap.Marker(point);
		var label = new BMap.Label(name,{offset:new BMap.Size(20,-10)});
		label.setTitle(id);
		label.setStyle({ border : "0", fontSize : "12px" });
		marker.setLabel(label);
		map.addOverlay(marker);
 		marker.addEventListener("click", function() {
			attribute(id);
		}); 
	}
	//编辑点
	function editBelt(id,lon,lat)
	{
		var thisid = id;
		var thislon =lon;
		var thislat =lat;
		top.$.jBox.open("iframe:${ctx}/grassbelt/sysGrassBelt/form?id="+id+"&lon=" + lon +"&lat="+lat, "编辑", 600, 480, {
            buttons: {"确定": "ok", "关闭": true,"移除点":"remove"},submit: function (v, h, f) {
                if (v == "ok") {                  
                    //编辑标准值
                    var coveragelist = new Array();
                    var productionlist = new Array();
                    var coverageidslist = new Array();
                    var beltFrame = h.find("iframe")[0].contentWindow.document;
                   	var name = beltFrame.getElementsByName('name')[0].value;//
                   	var id = beltFrame.getElementsByName('id')[0].value;//
                   	var grasstypeid = beltFrame.getElementsByName('grasstypeid')[0].value;//
                   	var standImg = beltFrame.getElementsByName('standImg')[0].value;//
                   	var month = beltFrame.getElementsByName('month')[0].value;//
                   	//var standAmount = beltFrame.getElementsByName('standAmount')[0].value;//
                   	if(grasstypeid == '')
                   	{
                   		showTip("请选择草地类型");
                   		return false;
                   	}
                   	
                	var coverageids = beltFrame.getElementsByName('coverageid');//
                   	for(var i=0;i<coverageids.length;i++)
                   	{
                   		var va = beltFrame.getElementsByName('coverageid')[i].value;
                   		if(va =='')
                   			va = "";
                   		coverageidslist.push(va);
                   	}
                   	//盖度
                   	var coverage = beltFrame.getElementsByName('coverage');//
                   	for(var i=0;i<coverage.length;i++)
                   	{
                   		var va = beltFrame.getElementsByName('coverage')[i].value;
                   		if(va =='')
                   			va = "0";
                   		coveragelist.push(va);
                   	}
                   	//产量
                   	var production = beltFrame.getElementsByName('production');//
                   	for(var i=0;i<coverage.length;i++)
                   	{
                   		var va = beltFrame.getElementsByName('production')[i].value;
                   		if(va =='')
                   			va = "0";
                   		productionlist.push(va);
                   	}
                	var lon = beltFrame.getElementsByName('lon')[0].value;//
                	var lat = beltFrame.getElementsByName('lat')[0].value;//
	                var json = {
                   			"id":id,
		                    "name": name,
		                    "grasstypeid": grasstypeid,
		                    "stand8val": 0,
		                    "month" : month,
		                    "standAmount": 0,
		                    "coverage": coveragelist,
		                    "coverageids":coverageidslist,
		                    "production": productionlist,		                    
		                    "standImg" : standImg,
		                    "lon" : lon,
		                    "lat" : lat
		                };
	                $.ajax({
	                    //提交数据的类型 POST GET
	                    type:"POST",
	                    //提交的网址
	                    url:"${ctx}/grassbelt/sysGrassBelt/saveBelt",
	                    contentType: "application/json; charset=utf-8",   //内容类型
	                    //提交的数据
	                    data:JSON.stringify(json),
	                    //返回数据的格式
	                    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
	                    //在请求之前调用的函数
	                    beforeSend:function(){loading('正在提交，请稍等...');},
	                    //成功返回之后调用的函数
	                    success:function(data){
	                        if(data.code == '0000')
	                        {
	                            closeLoading();
	                            removeMaker(thisid);
	                            //打点
	                    		var point = new BMap.Point(lon, lat);
	                    		var marker = new BMap.Marker(point);// 创建标注
	                    		map.addOverlay(marker);             // 将标注添加到地图中
	                    		addMarker(data.id,point,data.name,data.stand8val,data.standAmount);
	                    		marker.disableDragging();           // 不可拖拽
	                    		// 创建点
	                    		//marker.addEventListener("click",attribute);
	                    		marker.addEventListener("click", function() {
	                    			attribute(id,data.lon,data.lat);
	                    		});
	                        }

	                    }   ,
	                    //调用执行后调用的函数
	                    complete: function(XMLHttpRequest, textStatus){
	                    },
	                    //调用出错执行的函数
	                    error: function(){
	                        //请求出错处理
	                        alertx("请求异常",closed);
	                    }
	                });	
                    return true;
                }
                else if(v == "remove")
                {
                	removeMaker(thisid);
                     $.getJSON('${ctx}/grassbelt/sysGrassBelt/deleteMarker?id=' + thisid, function (data) {
                        //遍历json中的每个entry
						if(data.code == "0000")
						{
							removeMaker(thisid);
						}
                    });                	
                }
            },
            loaded:function(h){
                $(".jbox-content", top.document).css("overflow-y","hidden");
            }
        });
	}
	
	function attribute(id,lon,lat){
		editBelt(id,lon,lat)
	}
	function removeMaker(id)
	{
		var allOverlay = map.getOverlays();
		for (var i = 0; i < allOverlay.length -1; i++){
			if(allOverlay[i].Qa)
			{
				if(allOverlay[i].getLabel().getTitle() == allOverlay[i].getLabel().getTitle()){
					map.removeOverlay(allOverlay[i]);
					return false;
				} 		
			}
 

		}
		
	}
	//移除所有点
	function removeAllMaker()
	{
		map.clearOverlays();
		
	}
	function deletePoint(){
		var allOverlay = map.getOverlays();
		for (var i = 0; i < allOverlay.length -1; i++){
			alert(allOverlay[i].getLabel());
			if(allOverlay[i].getLabel().content == "我是id=1"){
				map.removeOverlay(allOverlay[i]);
				return false;
			}
		}
	}
	function query()
	{
		removeAllMaker();
		var name = $("#name").val();
		var id = $("#grasstypeId").val();
		$.ajax({
            url:"${ctx}/grassbelt/sysGrassBelt/query",
            type:"post",
            data:{name:name,grassid:id},
            success:function(data){
                $.each(data, function (entryindex, entry) {       
           			var point = new BMap.Point(entry["lon"], entry["lat"]);
     				addMarker(entry["id"],point,entry["name"],entry["stand8val"],entry["standAmount"]);
              });
            },
            error:function(e){
                alert("错误！！");
                window.clearInterval(timer);
            }
        });       
	}
</script>
